<template>
	<div>
		<el-form :model="queryForm" :inline="true">
			<el-form-item>
				<el-input v-model="queryForm.account" clearable placeholder="账号"/>
			</el-form-item>
			<el-form-item>
				<el-input v-model="queryForm.name" clearable placeholder="姓名"/>
			</el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="init()">查询</el-button>
		  </el-form-item>
		  <el-form-item>
		  	<el-button type="success" @click="saveDialog = true">添加</el-button>
		  </el-form-item>
		</el-form>
	</div>
	
	<div style="margin-top: 1%;">
	<el-table :data="tableData" style="width: 100%;" max-height="500" stripe border highlight-current-row size="large">
	  <el-table-column prop="account" label="账号" min-width="150" />
	  <el-table-column prop="name" label="姓名" min-width="150" />
	  <el-table-column prop="mail" label="邮箱" min-width="180" />
	  <el-table-column prop="createTime" label="添加时间" min-width="180" :formatter="formatterTime"/>
	  <el-table-column prop="updateTime" label="修改时间" min-width="180" :formatter="formatterTime" />
	  <el-table-column label="操作" min-width="230">
	    <template #default="scope">
	  	<el-button size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
		<el-button size="small" @click="toUpdate(scope.row)">修改</el-button>
		<el-button size="small" type="danger" v-if="scope.row.lockFlag === 0" @click="handleLock(scope.row)">锁定</el-button>
		<el-button size="small" type="danger" v-else @click="handleUnLock(scope.row)">解锁</el-button>
	    </template>
	  </el-table-column>
	</el-table>
	<el-pagination background layout="total, sizes, prev, pager, next" style="margin-top: 2%;"
		:page-sizes="[10, 20, 50]"
		@size-change="init"
		@current-change="init"
		v-model:page-size="queryForm.pageSize"
		v-model:current-page="queryForm.page"
		:total="totalData"
	/>
	</div>

<el-dialog v-model="detailDialog" title="系统用户详情">
  <el-form :model="detailForm">
	<el-form-item label="账号" prop="account" :label-width="formLabelWidth">
	  <el-input v-model="detailForm.account" disabled/>
	</el-form-item>
	<el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
	  <el-input v-model="detailForm.name" disabled/>
	</el-form-item>
	<el-form-item prop="head" label="头像" :label-width="formLabelWidth">
		<el-image style="height: 200px;" :src="imageBaseUrl + detailForm.head" fit="fill" :preview-src-list="[imageBaseUrl + detailForm.head]"/>
	</el-form-item>
	<el-form-item label="邮箱" prop="mail" :label-width="formLabelWidth">
	  <el-input v-model="detailForm.mail" disabled/>
	</el-form-item>
	<el-form-item label="注册时间" prop="createTime" :label-width="formLabelWidth">
	  <el-input v-model="detailForm.createTime" disabled :formatter="formatterTime1"/>
	</el-form-item>
	<el-form-item label="修改时间" prop="updateTime" :label-width="formLabelWidth">
	  <el-input v-model="detailForm.updateTime" disabled :formatter="formatterTime1"/>
	</el-form-item>
  </el-form>
</el-dialog>

<el-dialog v-model="saveDialog" title="新增系统用户" destroy-on-close>
  <el-form :model="saveForm" :label-width="formLabelWidth" :rules="rules" ref="saveFormRef">
	<el-form-item label="账号" prop="account">
	  <el-input v-model="saveForm.account" />
	</el-form-item>
	<el-form-item label="姓名" prop="name" >
	  <el-input v-model="saveForm.name" />
	</el-form-item>
	<el-form-item label="邮箱" prop="mail" >
	  <el-input v-model="saveForm.mail" />
	</el-form-item>
  </el-form>
  <template #footer>
	<div class="dialog-footer">
	  <el-button @click="saveDialog = false">取消</el-button>
	  <el-button type="primary" @click="saveHandler()">确定</el-button>
	</div>
  </template>
</el-dialog>

<el-dialog v-model="updateDialog" title="修改系统用户" destroy-on-close>
  <el-form :model="updateForm" :label-width="formLabelWidth" :rules="rules" ref="updateFormRef">
	<el-form-item label="账号" prop="account">
	  <el-input v-model="updateForm.account" disabled/>
	</el-form-item>
	<el-form-item label="姓名" prop="name" >
	  <el-input v-model="updateForm.name" />
	</el-form-item>
	<el-form-item label="邮箱" prop="mail" >
	  <el-input v-model="updateForm.mail" />
	</el-form-item>
  </el-form>
  <template #footer>
	<div class="dialog-footer">
	  <el-button @click="updateDialog = false">取消</el-button>
	  <el-button type="primary" @click="updateHandler()">确定</el-button>
	</div>
  </template>
</el-dialog>

</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { imageBaseUrl, formatterTime, formatterTime1 } from "@/global/index.js"
const { proxy } = getCurrentInstance()

const queryForm = reactive({})
const totalData = ref(0)

//详情
const detailDialog = ref(false)
const detailForm = reactive({})

const formLabelWidth = ref(80);


let tableData = ref([]);
const init = async () => {
	let params = Object.assign({}, queryForm);
	let result = await proxy.axios.post('sys/user/list', params)
	if (!result) {
	  return;
	}
	tableData.value = result.list;
	totalData.value = result.total;
}
init();

const handleDetail = (idx, rowData) => {
	Object.assign(detailForm, rowData)
	detailDialog.value = true
}

//新增
const saveDialog = ref(false)
const saveForm = reactive({})
const saveFormRef = ref(false)
const saveHandler = () => {
  saveFormRef.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    let params = Object.assign({}, saveForm)
    let result = await proxy.axios.post('sys/user/save', params)
    if (!result) {
		return
    }
    proxy.msg.success("新增成功")
	saveDialog.value = false
    init()
  });
}

const updateDialog = ref(false)
const updateForm = reactive({})
const updateFormRef = ref(false)
//修改
const toUpdate = (rowData) => {
	Object.assign(updateForm, rowData)
	updateDialog.value = true
}
const updateHandler = () => {
  updateFormRef.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    let params = Object.assign({}, updateForm)
    let result = await proxy.axios.post('sys/user/update', params)
    if (!result) {
		return
    }
    proxy.msg.success("修改成功")
	updateDialog.value = false
    init()
  });
}
let rules = {
	name: [
	  { required: true, message: "必填项不能为空"},
	],
	mail: [
	  { required: true, message: "必填项不能为空"},
	],
	account: [
	  { required: true, message: "必填项不能为空"},
	],
}

const handleLock = async (rowData) => {
	let result = await proxy.axios.get('sys/user/lock?id=' + rowData.id)
	if (!result) {
		return
	}
	proxy.msg.success("锁定成功")
	init()
}
const handleUnLock = async (rowData) => {
	let result = await proxy.axios.get('sys/user/unlock?id=' + rowData.id)
	if (!result) {
		return
	}
	proxy.msg.success("解锁成功")
	init()
}

</script>

<style>
</style>